<template>
  <div id="customerFromCharts" class="clearFix bgc-fff">
    <div class="clearFix">
      <canvas></canvas>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import echarts from 'echarts'
  export default {
    name: '',
    // props: ['customerFromData'],
    data() {
      return {
        customerFromChartData: []
      }
    },
    components: {
    },
    created() {
    },
    mounted() {
    },
    methods: {
      initCharts(data) {
        // const that = this
        console.log('customerFromData2', data)
        const myChart = echarts.init(document.getElementById('customerFromCharts'))
        const option = {
          title: {
            text: '客户分布',
            left: 'right',
            textStyle: {
              color: '#000'
            }
          },
          'tooltip': {
            'trigger': 'item',
            'confine': true,
            'formatter': '{a} <br/>{b}: {c} ({d}%)'
          },
          'legend': {
            'orient': 'vertical',
            'x': 'left',
            'data': data.map(function(item) {
              return item.name
            })
          },
          'series': [
            {
              'name': '客户占比',
              'type': 'pie',
              'radius': ['50%', '70%'],
              'center': ['50%', '60%'],
              'avoidLabelOverlap': false,
              'label': {
                'normal': {
                  'show': false,
                  'position': 'center'
                },
                'emphasis': {
                  'show': true,
                  'textStyle': {
                    'fontSize': '30',
                    'fontWeight': 'bold'
                  }
                }
              },
              'labelLine': {
                'normal': {
                  'show': false
                }
              },
              'data': data
            }
          ]
        }
        // 清空画布防止缓存
        myChart.clear()
        // 设置数据层 需先setOption() 后才能getComponent()
        myChart.setOption(option, true)
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  #customerFromCharts{
    margin: 0 0 0 0;
    width:100%;
    height: 440px;
  }
</style>

